<template>
<div class="layout-route">
    <div class="card card-search">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" inline label-width="100px">
            
            <!-- <el-form-item label="运营" prop="admin_id">
                <el-select v-model="queryParams.admin_id" placeholder="请选择运营" clearable size="small" style="width: 240px">
                    <el-option v-for="(dict, index) in salesmanList" :key="index" :label="dict.nickname" :value="dict.id" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="归属店铺" prop="shop_id">
                <el-select v-model="queryParams.shop_id" placeholder="请选择店铺" clearable size="small">
                    <el-option v-for="(item, index) in shopList" :key="index" :label="item.shop_name" :value="item.shop_id" />
                </el-select>
            </el-form-item>
            
            <el-form-item label="系列名" prop="name">
                <el-input v-model.trim="queryParams.name" placeholder="请输入系列名" clearable size="small" style="width: 200px" @keyup.enter.native="handleQuery" />
            </el-form-item>

            <!-- <el-form-item label="时间" prop="date">
                <el-date-picker v-model="queryParams.date" format="yyyy-MM-dd" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 240px"></el-date-picker>
            </el-form-item> -->

            <el-form-item label=" ">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>

        </el-form>
    </div>

    <div class="card">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="showDetailDialog({}, 'add')">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" :loading="download" :disabled="download" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

            <el-tabs v-model="activeTab" @tab-click="handleStatus" type="border-card">
                <el-tab-pane v-for="(item, index) in tabstatus" :key="index" :label="item.label" :name="item.value.toString()"> </el-tab-pane>
            </el-tabs>
            <el-table v-loading="loading" :summary-method="getSummaries" show-summary :data="tableData" border script>
                <el-table-column label="广告状态" prop="api_status" min-width="80"></el-table-column>
                <!-- <el-table-column label="系列ID" prop="campaign_id" min-width="140"></el-table-column> -->
                <el-table-column label="归属店铺" prop="shop_name" min-width="120"></el-table-column>
                <el-table-column label="系列名" prop="adv_name" min-width="220"></el-table-column>
                <el-table-column label="类型" prop="adv_type" min-width="80"></el-table-column>
                <el-table-column label="广告消耗" prop="spend" min-width="80"></el-table-column>
                <!-- <el-table-column label="日期" prop="stat_time_day" min-width="120" sortable></el-table-column> -->
                <el-table-column label="cpm" prop="cpm" min-width="80" sortable></el-table-column>
                <el-table-column label="ctr点击率" prop="website_ctr" min-width="120" sortable></el-table-column>
                <el-table-column label="ROI" prop="website_purchase_roas" min-width="80" sortable></el-table-column>
                <!-- <el-table-column label="转换价值" prop="conversion_values"></el-table-column> -->
                <!-- <el-table-column label="转换量" prop="conversions" min-width="80"></el-table-column> -->
                <el-table-column label="视频播放次数" prop="video_play_actions" min-width="140" sortable></el-table-column>
                <el-table-column label="操作" prop="status" min-width="60" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="VideoDetails(scope.row, scope.$index)" >视频明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>

        
        <DetailDialog v-model="detailDialog.visible" v-if="detailDialog.visible" :params="detailDialog.data" :type="detailDialog.type" @success="handleQuery"></DetailDialog>
        <VideoDialog v-model="videoDialog.visible" v-if="videoDialog.visible" :params="videoDialog.data" :type="videoDialog.type" @success="handleQuery"></VideoDialog>

    </div>
</div>
</template>

<script>
import { queryExpertList,exportExpertList } from '@/api/advertisement'
import {  getSalesmanList,getShopList } from '@/api/shop'
import { parseTime } from '@/utils/quickadmin'
import DetailDialog from './components/DetailDialog.vue'
import VideoDialog from './components/VideoDialog.vue'
import { exportFile } from '@/utils/index'
export default {
name: 'AdvaccountList',
components: { DetailDialog,VideoDialog },

data() {
    return {
        download: false,
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tableData: [],
        salesmanList: [],
        shopList: [],
        pageInfo: {
            page: 1,
            limit: 10,
        },
        // 查询参数
        queryParams: {
            shop_id: undefined,
            admin_id: undefined,
            advertiser_id: undefined,
            platform_id: undefined,
        },
        detailDialog: {
            visible: false,
            data: {},
        },
        videoDialog: {
            visible: false,
            data: {},
        },
        tabstatus: [
            { label: '所有', value: "All" },
            { label: '达人', value: "2" },
            { label: '混剪', value: "1" },
        ],
        activeTab: 'All',
    }
},
watch: {
    '$route': {
    handler(val) {
        this.queryParams.advertiser_id =val.query.advertiser_id
    },
    immediate: true
    }
},
async created() {
    this.loading = true
    try {
        const [ PlatformData,shopData] = await Promise.all([getSalesmanList(), getShopList()])
        this.salesmanList = PlatformData?.data?.list ?? []
        this.shopList = shopData?.data?.list ?? []
    } catch (error) {
        this.loading = false
        console.log(error)
    }
    this.getList()
},
methods: {
    handleExport() {
        this.download = true
        const qyparams = {
            ...this.pageInfo,
            ...this.queryParams,
        }
        if (qyparams.date?.length == 2) {
            qyparams.date = [parseTime(qyparams.date[0], 'y-m-d'), parseTime(qyparams.date[1], 'y-m-d')]
        }
        exportExpertList(qyparams)
            .then(res => {
                console.log(res)
                exportFile(res, () => {
                    this.download = false
                })
            })
            .catch(err => {
                console.log(err)
                this.download = false
            })
    },
    handleStatus(tab) {
        this.pageInfo.page = 1
        this.queryParams.tabstatus = tab.name
        this.getList()
    },
    //表尾合计行
    getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '统计'
                return
            }
            const values = data.map(item => Number(item[column.property]))
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr)
                    if (!isNaN(value)) {
                        return prev + curr
                    } else {
                        return prev
                    }
                }, 0)
                if (index === 7) {
                    sums[index] = ""
                }else {
                    sums[index] = sums[index].toFixed(2)
                }
            } else {
                sums[index] = ''
            }
        })
        return sums
    },
    showDetailDialog(row, type) {
        this.detailDialog.visible = true
        this.detailDialog.data = row
        this.detailDialog.type = type
    },
    VideoDetails(row, type) {
        this.videoDialog.visible = true
        this.videoDialog.data = row
        
    },
    //列表
    getList() {
        this.loading = true
        const qyparams = {
            ...this.pageInfo,
            ...this.queryParams,
        }
        if (qyparams.date?.length == 2) {
            qyparams.date = [parseTime(qyparams.date[0], 'y-m-d'), parseTime(qyparams.date[1], 'y-m-d')]
        }
        queryExpertList(qyparams)
            .then(response => {
                this.tableData = response.data.list
                this.total = response.data.total
            })
            .finally(() => {
                this.loading = false
            })
    },

    // 搜索按钮操作
    handleQuery() {
        this.pageInfo.page = 1
        this.getList()
    },

    // 重置按钮操作
    resetQuery() {
        this.resetForm('queryForm')

        this.handleQuery()
    },
},
}
</script>
<style scoped>
::v-deep .el-tabs .el-tabs__content {
padding: 0;
border-bottom: 0;
}
.el-tabs--border-card {
box-shadow: none;
border-bottom: 0;
}

::v-deep .el-tabs .el-tabs__content {
padding: 0;
border-bottom: 0;
}
.table-wrap {
padding: 15px;
border-bottom: 1px solid #dfe4ed;
border-left: 1px solid #dfe4ed;
border-right: 1px solid #dfe4ed;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
